<div class="uk-grid ">
    <div class="uk-width-1-4@l uk-width-1-2@m">
        <div class="dux-stats-card red uk-margin-remove-top uk-margin-bottom">
            <div class="card-body">
                <div class="content">
                    <p>站点访问总量</p>
                    <div class="title">{$siteViews}</div>
                </div>
                <div class="icon">
                    <i class="fa fa-cubes"></i>
                </div>
                <i class="topic fa fa-cubes"></i>
            </div>

        </div>
    </div>
    <div class="uk-width-1-4@l uk-width-1-2@m">
        <div class="dux-stats-card green uk-margin-remove-top uk-margin-bottom">
            <div class="card-body">
                <div class="content">
                    <p>API访问量</p>
                    <div class="title">{$systemStatis.api ? $systemStatis.api : 0}</div>
                </div>
                <div class="icon">
                    <i class="fa fa-adn"></i>
                </div>
                <i class="topic fa fa-adn"></i>
            </div>
        </div>
    </div>
    <div class="uk-width-1-4@l uk-width-1-2@m">
        <div class="dux-stats-card orange uk-margin-remove-top uk-margin-bottom">
            <div class="card-body">
                <div class="content">
                    <p>电脑端访问量</p>
                    <div class="title">{$systemStatis.web ? $systemStatis.web : 0}</div>
                </div>
                <div class="icon">
                    <i class="fa fa-desktop"></i>
                </div>
                <i class="topic fa fa-desktop"></i>
            </div>

        </div>
    </div>
    <div class="uk-width-1-4@l uk-width-1-2@m">
        <div class="dux-stats-card uk-margin-remove-top uk-margin-bottom">
            <div class="card-body">
                <div class="content">
                    <p>移动端访问量</p>
                    <div class="title">{$systemStatis.mobile ? $systemStatis.mobile : 0}</div>
                </div>
                <div class="icon">
                    <i class="fa fa-mobile-phone"></i>
                </div>
                <i class="topic fa fa-mobile-phone"></i>
            </div>

        </div>
    </div>
</div>


<div class="uk-card uk-card-default uk-card-body uk-card-small">
    <h3 class="uk-card-title">
        访问趋势
    </h3>

    <div class="uk-card-body">
        {$viewBarJs}
    </div>
</div>
<br>
<div class="uk-grid">
    <div class="uk-width-1-2@m">
        <div class="uk-card uk-card-default uk-card-body uk-card-small">
            <h3 class="uk-card-title">
                系统信息
            </h3>
            <div class="dux-avg-layout">
                <ul class="uk-list uk-list-divider">
                    <li class="uk-flex">
                        <div class="uk-width-small">系统名称</div>
                        <div class="uk-flex-1">{$sysInfo.title}</div>
                    </li>
                    <li class="uk-flex">
                        <div class="uk-width-small">支持团队</div>
                        <div class="uk-flex-1">{$sysInfo.team}</div>
                    </li>
                    <li class="uk-flex">
                        <div class="uk-width-small">团队主页</div>
                        <div class="uk-flex-1">
                            <a href="{$sysInfo.home}" target="_blank">{$sysInfo.home}</a>
                        </div>
                    </li>
                    <li class="uk-flex">
                        <div class="uk-width-small">技术支持</div>
                        <div class="uk-flex-1">
                            <a href="//www.duxphp.com" target="_blank"><span
                                    class="uk-label uk-label-warning">DuxPHP</span></a>
                            <a href="//github.com/duxphp/DuxCMS3" target="_blank"><span
                                    class="uk-label">github</span></a>
                            <a href="//shang.qq.com/wpa/qunwpa?idkey=658c2efa6fefcb45c44ddb55e62929e9eff8c2324a6a4c28345b9a1728b22fd7"
                                target="_blank"><span class="uk-label uk-label-success">qq群</span></a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="uk-width-1-2@m">
        <div class="uk-card uk-card-default uk-card-body uk-card-small">
            <h3 class="uk-card-title">
                软件信息
            </h3>
            <div class="dux-avg-layout">
                <ul class="uk-list uk-list-divider">
                    <li class="uk-flex">
                        <div class="uk-width-small">系统版本</div>
                        <div class="uk-flex-1">v{$ver.ver}</div>
                    </li>
                    <li class="uk-flex">
                        <div class="uk-width-small">版本日期</div>
                        <div class="uk-flex-1">{$ver.date}</div>
                    </li>
                    <li class="uk-flex">
                        <div class="uk-width-small">版本类型</div>
                        <div class="uk-flex-1">
                            {$ver.release ? '正式版' : '体验版'}
                        </div>
                    </li>
                    <li class="uk-flex">
                        <div class="uk-width-small">系统更新</div>
                        <div class="uk-flex-1 uk-text-danger">
                            <a href="javascript:;" data-info><span class="uk-label uk-label-success"><i
                                        class="fa fa-laptop"></i> 版本信息</span></a>
                            <a href="javascript:;" data-update><span class="uk-label" data-update-auto><i
                                        class="fa fa-cloud-download"></i> 检测更新</span></a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div id="modal-info" uk-modal>
    <div class="uk-modal-dialog">
        <button class="uk-modal-close-default" type="button" uk-close></button>
        <div class="uk-modal-header">
            <h2 class="uk-modal-title">版本信息</h2>
        </div>
        <div class="uk-modal-body" uk-overflow-auto data-content>
        </div>
        <div class="uk-modal-footer uk-text-right">
            <button class="uk-button uk-button-default uk-modal-close" type="button">关闭</button>
        </div>
    </div>
</div>
<div id="modal-update" uk-modal>
    <div class="uk-modal-dialog">
        <button class="uk-modal-close-default" type="button" uk-close></button>
        <div class="uk-modal-header">
            <h2 class="uk-modal-title">检测到新版本</h2>
        </div>
        <div class="uk-modal-body" uk-overflow-auto data-content>
        </div>
        <div class="uk-modal-footer uk-text-right">
            <button class="uk-button uk-button-default uk-modal-close" type="button">关闭</button>
            <a class="uk-button uk-button-primary" data-url href="#">立即升级</a>
        </div>
    </div>
</div>
<script>
    Do('base', function () {
        var lock = false;
        $('[data-info]').on('click', function () {
            app.ajax({
                url: '{url("info")}',
                loading: true,
                success: function (info) {
                    $.each(info, function (key, value) {
                        $('#modal-info').find('[data-' + key + ']').html(value);
                    });
                    UIkit.modal('#modal-info').show();
                },
                error: function (msg) {
                    app.error(msg);
                }
            });
        });
        $('[data-update]').on('click', function () {
            if (lock) {
                return true;
            }
            app.ajax({
                url: '{url("updateCheck")}',
                loading: true,
                success: function (info) {
                    $.each(info, function (key, value) {
                        $('#modal-update').find('[data-' + key + ']').html(value);
                    });
                    $('#modal-update').find('[data-url]').attr('href', '{url("update")}?id=' + info.ver_id);
                    UIkit.modal('#modal-update').show();
                },
                error: function (msg) {
                    app.error(msg);
                }
            });
        });
        //自动更新
        var update = function () {
            lock = true;
            $('[data-update-auto]').html('<i class="fa fa-spinner fa-spin"></i> 检测更新中...');
            app.ajax({
                url: '{url("updateCheck")}',
                success: function (info) {
                    lock = false;
                    $('[data-update-auto]').html('检测到新版本');
                    $.each(info, function (key, value) {
                        $('#modal-update').find('[data-' + key + ']').html(value);
                    });
                    $('#modal-update').find('[data-url]').attr('href', '{url("update")}?id=' + info.ver_id);
                    UIkit.modal('#modal-update').show();
                },
                error: function (msg) {
                    lock = false;
                    $('[data-update-auto]').html('未检测到更新');
                }
            });
        }
        {$updateStatus ? 'update();' : ''}
    });
</script>